<template>
  <div id="orderCount">
    <el-row :gutter="10">
      <el-col :span="4" class="flex" style="align-items: center;">
        <span class="nowrap" style="padding-right: 6px">通道:</span>

        <el-select size="small" v-model="orderInfo.channelId" @change="channelChange" clearable placeholder="请选择">
          <el-option v-for="item in channelList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center;">
        <span class="nowrap" style="padding-right: 6px"> 商户组:</span>

        <el-select size="small" v-model="orderInfo.groupId" @visible-change="groupVisibleChange" @change="groupChange" clearable
                   placeholder="请选择">
          <el-option v-for="item in groupList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center;">
        <span class="nowrap" style="padding-right: 6px"> 商户:</span>


        <el-select size="small" v-model="orderInfo.businessId" @visible-change="businessVisibleChange" clearable placeholder="请选择">
          <el-option v-for="item in businessList" :key="item.id" :label="item.name" :value="item.id">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4" class="flex" style="align-items: center;">
        <span class="nowrap" style="padding-right: 6px">  用户:</span>


        <el-select size="small" v-model="orderInfo.userId" clearable placeholder="请选择">
          <el-option v-for="item in userAsk" :key="item.value" :label="item.value" :value="item.lable">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="5" class="flex" style="align-items: center;">
        <span class="nowrap" style="padding-right: 6px"> 支付方式:</span>


        <el-select size="small" v-model="orderInfo.payType" clearable placeholder="请选择">
          <el-option v-for="item in payType" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>

      </el-col>
    </el-row>
   <el-row :gutter="10" style="margin-top: 10px">
     <el-col :span="6" class="flex" style="align-items: center;">
       <span class="nowrap" style="padding-right: 6px">  起始时间：</span>


       <div class="block">
         <el-date-picker style="width: 100%" size="small" v-model="orderInfo.indexDate" type="datetime" placeholder="选择日期时间" class="width1">
         </el-date-picker>
       </div>
     </el-col>
     <el-col :span="6" class="flex" style="align-items: center;">
       <span class="nowrap" style="padding-right: 6px">   结束时间：</span>


       <div class="block ">
         <el-date-picker size="small" style="width: 100%" v-model="orderInfo.endDate" type="datetime" placeholder="选择日期时间" class="width1">
         </el-date-picker>
       </div>
     </el-col>
     <el-col :span="6" class="flex" style="align-items: center;">
       <!--<span class="nowrap" style="padding-right: 6px"> 支付方式:</span>-->
       <el-button style="margin-left: 12px" type="primary" size="mini" @click="queryOrderList(0)">查询</el-button>
       <el-button type="primary" size="mini" @click="queryOrderList(1)">今天</el-button>
       <el-button type="primary" size="mini" @click="queryOrderList(2)">昨天</el-button>
     </el-col>
   </el-row>
    <div class="flex header" style="padding: 5px 10px;font-size: 14px">



    </div>


    <!--<el-row class="orderCheck header">-->
    <!--<el-col :span="4">失败金额：<span>{{countObj.failMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">失败数量：<span>{{countObj.failNumber}}</span>单</el-col>-->
    <!--<el-col :span="4">成功金额：<span>{{countObj.successMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">成功数量：<span>{{countObj.successNumber}}</span>单</el-col>-->
    <!--<el-col :span="4">总金额：<span>{{countObj.totalMoeny}}</span>元</el-col>-->
    <!--<el-col :span="4">总数量：<span>{{countObj.totalNumber}}</span>单</el-col>-->
    <!--</el-row>-->
    <el-table :data="tableData" border stripe v-loading="loading1">
      <el-table-column type="index" width="80">
      </el-table-column>
      <el-table-column prop="channel" label="通道">
      </el-table-column>
      <el-table-column prop="userName" label="用户名">
      </el-table-column>

      <el-table-column prop="payType" label="支付类型">
      </el-table-column>
      <el-table-column prop="amount" label="金额">
      </el-table-column>


    </el-table>
    <!--<div class="block" style="text-align: right;padding-right: 20px">-->

    <!--<el-pagination layout="prev, pager, next" :current-page.sync="orderInfo.pageNumber" :page="orderInfo.pageNumber"-->
    <!--@current-change="handleCurrentChange" :total="total" :page-size="orderInfo.pageSize">-->
    <!--</el-pagination>-->
    <!--</div>-->
  </div>
</template>

<script>
  import dateformat from 'dateformat'
  import payType from '../../assets/paytype'

  export default {
    data () {
      return {
        value1: "",
        loading1: false,
        payType: payType,
        value4: '',
        userAsk: [],
        tableData: [],
        channelList: [],
        orderInfo: {
          userId: "",
          indexDate: "",
          endDate: '',
          channelId: '',
          payType: '',
          groupId: undefined,
          businessId: undefined
        },
        total: 1,
        countObj: {},
        groupList: [],
        businessList: []
      }
    },
    created() {
      this.getUserList();
      this.getChannelList()
    },
    methods: {
      getUserList() {
        let params = {
          pageSize: 9999,
          pageNumber: 1
        }
        this.$api.getUserList(params).then(res => {
          if (res.code == '000000') {
            console.log(res.data);
            let mid = res.data.list;
            mid.forEach(item => {
              this.userAsk.push({
                value: item.username,
                lable: item.id
              })
              if (item.payType == null) {
                item.payType = '全部'
              }
            })
          }
        })
      },
      getChannelList() {
        this.$api.getChannelList().then(res => {
          if (res.code == '000000') {
            this.loading1 = false;
            this.channelList = res.data;
          }
        })
      },
      channelChange(val) {
        if (val) {
          this.$api.getBusinessGroupList(val).then(res => {
            if (res.code == '000000') {
              this.groupList = res.data
            }
          })
        }
      },
      groupVisibleChange(val) {
        if (val) {
          if (!this.orderInfo.channelId) {
            this.groupList = []
            this.$message.info('请先选择通道')
          }
        }
      },
      businessVisibleChange(val) {
        if (val) {
          if (!this.orderInfo.groupId) {
            this.businessList = []
            this.$message.info('请先选择商户组')
          }
        }
      },
      groupChange(val) {
        if (val) {
          this.$api.getBusinessList(val, {pageSize: 9999}).then(res => {
            if (res.code == '000000') {
              this.businessList = res.data.list
            }
          })
        }
      },
      queryOrderList(mes) {
        this.loading1 = true;
        for (let i in this.orderInfo) {
          if (this.orderInfo[i] == '') {
            delete this.orderInfo[i]
          }
        }
        if (this.orderInfo.indexDate) {
          this.orderInfo.indexDate = Date.parse(this.orderInfo.indexDate);
        }
        if (this.orderInfo.endDate) {
          this.orderInfo.endDate = Date.parse(this.orderInfo.endDate);
        }
        if (isNaN(this.orderInfo.indexDate)) {
          delete this.orderInfo.indexDate
        }
        if (isNaN(this.orderInfo.endDate)) {
          delete this.orderInfo.endDate
        }

        var timeStamp = new Date(new Date().setHours(0, 0, 0, 0)) / 1000;
        if (mes == 0) {
          //查询
          sessionStorage.setItem("queryStatus", 0)
        }
        if (mes == 1) {
          //今天的
          this.orderInfo.indexDate = timeStamp * 1000
          sessionStorage.setItem("queryStatus", 1)
        }
        if (mes == 2) {
          //昨天的
          this.orderInfo.indexDate = timeStamp * 1000 - 86400 * 1000
          this.orderInfo.endDate = timeStamp * 1000
          sessionStorage.setItem("queryStatus", 2)
        }
        this.$api.getorderCountList(this.orderInfo).then(res => {
          if (res.code == '000000') {
            this.loading1 = false;
            this.total = res.data.totalRow;
            this.tableData = res.data;
            this.tableData.forEach(item => {
//              if (item.indexDate) {
//                let date = new Date(item.indexDate);
//                item.indexDate = dateformat(date, 'yyyy-mm-dd HH:MM')
//              }
//              if (item.endDate) {
//                let date = new Date(item.endDate);
//                item.endDate = dateformat(date, 'yyyy-mm-dd HH:MM')
//              }
              switch (item.payType) {
                case 0:
                  item.payType = '全部';
                  break;
                case 1:
                  item.payType = '支付宝扫码';
                  break;
                case 2:
                  item.payType = '支付宝wap';
                  break;
                case 3:
                  item.payType = '京东支付';
                  break;
                case 4:
                  item.payType = 'QQ支付';
                  break;
                case 5:
                  item.payType = '快捷支付';
                  break;
                case 6:
                  item.payType = '微信扫码';
                  break;
                case 7:
                  item.payType = '微信H5';
                  break;
                case 8:
                  item.payType = 'QQwap';
                  break;
                case 9:
                  item.payType = '银联扫码';
                  break;
                default :
                  break;
              }

            })
            this.$message({
              type: 'success',
              message: '查询成功'
            })
          }
        })
//        this.$api.getBackOrderCount(this.orderInfo).then(res => {
////          this.$message.success('统计成功');
//          this.countObj = res.data
//        })
      },
      handleCurrentChange(val) {
        this.orderInfo.pageNumber = val;
        let queryStatus = sessionStorage.getItem("queryStatus")
        this.queryOrderList(queryStatus)
      }
    }
  }
</script>

<style lang="less">
  #orderCount {
    th {
      text-align: center;
    }

    .header {
      align-items: center;
      font-size: 13px;
      white-space: nowrap;
      display: flex;
      margin-bottom: 5px;
      /*justify-content: center;*/
    }
    .nowrap{
      font-size: 15px;
    }
    .width1 {
      width: 180px;
    }
    .orderCheck {
      font-size: 14px;
    }
  }
</style>
